<template>
  <div>
    <el-form size="small" :inline="true">
      <el-form-item label="">
        <el-select v-model="state.symbol" filterable placeholder="请选择" :style="{width: '100%'}" @change="init">
          <el-option v-for="s in state.symbolOptions" :key="s" :label="s"
                     :value="s"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="">
        <el-select v-model="state.interval" placeholder="周期" :style="{width: '100%'}" @change="init">
          <el-option v-for="s in state.intervalOptions" :key="s" :label="s"
                     :value="s"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button icon="el-icon-refresh" size="mini" @click="refresh">刷新</el-button>
      </el-form-item>
    </el-form>
    <div id="echart" ref="chartRef"></div>

  </div>
</template>

<script setup lang="ts" name="MyChart">
import {onMounted, reactive, computed, ref} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useChartApi } from '/@/api/kline/index';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import Cookies from 'js-cookie';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { Session } from '/@/utils/storage';
import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import * as echarts from "echarts";

// 定义变量内容
const chartApi = useChartApi();
const chartRef = ref();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const route = useRoute();
const router = useRouter();
const state = reactive({
  chart: null,
  symbol: '',
  interval: "",
  symbolOptions: [],
  intervalOptions: [],
  time: 0,
  chartOption: {},
  chartData: {
    lines: {},
    clData: {},
  },
  startTime: 0,
  endTime: 0,
  onUpdate: false,
  runTick: false,
});


// 页面加载时
onMounted(() => {
  init();
  showLine();

  let startDate = new Date();
  startDate.setMonth(startDate.getMonth()-1);
  chartApi.getKLine({"symbol":"btcusdt","interval":"5m","startTime":startDate.getTime(),"endTime":new Date().getTime()})
});

// 登录
const init = () => {
  if (!state.symbol) {
    return;
  }
  if (!state.interval) {
    return;
  }
  if (!state.time) {
    return;
  }

  if (!state.runTick) {
    setInterval(tick, 1000);
    state.runTick = true;

    setInterval(function () {
      state.endTime = state.time;
      let start = state.time - getSeconds() * 2;
      getLine(start, state.time);
    }, 5000);

    setInterval(function () {
      showLine();
    }, 30000)
  }

  state.chartData = {
    lines: {},
    dataRoom: {
      start: 80,
      end: 100
    }
  };

  state.endTime = state.time;
  state.startTime = Math.max(0, state.time - getSeconds() * 1000);

  getLine(state.startTime, state.endTime);
  showLine();


};

const tick = () => {

}

const refresh = () => {

}

const getLine = (startTime:number,endTime:number) => {

}

const showLine = () => {
  const myChart = echarts.init(chartRef.value);
  const option = {
    grid: {
      top: 15,
      right: 15,
      bottom: 20,
      left: 30,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [10, 20, 15, 80, 70, 11, 30],
        type: 'bar',
      },
    ],
  };
  myChart.setOption(option);
}

const getSeconds = () => {
  let cycle = state.interval.slice(-1);
  let value = parseInt(state.interval.slice(0, -1));
  if (cycle == "m") {
    return value * 60;
  } else if (cycle == "H") {
    return value * 60 * 60;
  } else if (cycle == "D") {
    return value * 60 * 60 * 24;
  } else if (cycle == "W") {
    return value * 60 * 60 * 24 * 7;
  } else if (cycle == "M") {
    return value * 60 * 60 * 24 * 30;
  } else {
    return value * 60;
  }
}

</script>

<style scoped lang="scss">
#echart {
  width: 100%;
  height: calc(100vh - 200px);
}
</style>
